<template>
  <el-tabs
    v-model="$store.state.layout.tabs.value"
    type="card"
    @edit="tabsDelete"
    @tab-click="tabsClick"
  >
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.url"
      :label="tab.title"
      :name="tab.url"
      :closable="tab.url!='/'"
    ></el-tab-pane>
  </el-tabs>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { mapGetters } from "vuex";
import { getSubRoutes } from "@/utils/loopRoutes.js";

export default {
  data() {
    return {
      routes: []
    };
  },
  computed: {
    tabs() {
      return this.$store.state.layout.tabs.list.filter(tab => {
        return this.routes.includes(tab.title);
      });
    }
  },
  created() {
    //console.log(this.$store.state.layout.tabs.list);
    this.routes = getSubRoutes();
  },
  methods: {
    tabsDelete(targetName) {
      this.$store.dispatch("layout/closeTab", targetName);
    },
    tabsClick(tab) {
      this.$store.commit("layout/clickTab", tab.name);
    }
  }
};
</script>

<style scoped lang="stylus"></style>